<script setup>
import {FwbInput , FwbModal} from "flowbite-vue";
import {ref,reactive} from "vue";
import SvgIcon from "@/components/SvgIcon.vue";
const isShowModal = ref(false)
const closeModal = () => {
  isShowModal.value = false
}
const showModal = () => {
  isShowModal.value = true
}
defineExpose({
  showModal,
})
const typeIndex = ref(1)
const num = ref(1)
const payCourse = ref(1)
</script>

<template>
  <fwb-modal v-if="isShowModal" @close="closeModal" size="md" id="CreateModal">
    <template #header>
      <div class="text-lg flex flex-col text-sm text-[#9CA3AF] font-[500] font-Medium" >
        <div class="">
          <p class="text-md">Buy Licenses</p>
        </div>
        <div class="absolute w-full h-[1px] bg-[var(--theme-button-bg)] top-[111px] left-0 hidden s4k:block s4k:top-[79px]"></div>
      </div>
    </template>

    <template #body>
      <div class="absolute w-full h-[1px] bg-[var(--theme-button-bg)] top-[50px] left-0 s4k:hidden s2k:top-[60px]"></div>
      <div v-if="payCourse === 1">
        <div class="flex flex-row justify-start items-start mt-[32px]">
          <img src="@/assets/image/buyLicenses.png" alt="" class="w-[80px] h-[80px] rounded-[12px]">
          <div class="w-[340px] ml-[20px]">
            <p class="text-[16px] text-[var(--theme-font-color)]">Face Recognition</p>
            <p class="text-[14px] text-[var(--theme-font-desc-color)] my-[10px]">Publisher name</p>
            <p class="text-[14px] text-[var(--theme-font-desc-color)]">Face Recognition is a deep-learning based face recognition plugin, trained with 150,000+ datasets and OpenCV/NCNN API for all cameras.</p>
          </div>
        </div>
        <div class="w-full h-[1px] bg-[var(--theme-button-bg)] my-[16px]"></div>
        <div class="flex flex-row justify-between h-[72px] w-full">
          <div class="w-[214px] h-full border border-solid border-[var(--grid)] rounded-[8px] s4k:rounded-[8px] flex flex-col justify-center cursor-pointer"
               :style="{borderColor: typeIndex === 1? '#3F83F8':'', backgroundColor: typeIndex === 1? '#233876': ''}" @click="typeIndex = 1">
            <span class="ml-[12px] text-sm text-[var(--theme-font-desc-color)]">Monthly</span>
            <div class="ml-[12px] mt-[4px] text-sm text-[var(--theme-font-desc-color)]"><span class="text-[20px] text-[var(--theme-font-color)]">$20.00</span> / camera</div>
          </div>
          <div class="w-[214px] h-full border border-solid border-[var(--grid)] rounded-[8px] s4k:rounded-[8px] flex flex-col justify-center cursor-pointer"
               :style="{borderColor: typeIndex === 2? '#3F83F8':'', backgroundColor: typeIndex === 2? '#233876': ''}" @click="typeIndex = 2">
            <span class="ml-[12px] text-sm text-[var(--theme-font-desc-color)]">Annual Plan</span>
            <div class="ml-[12px] mt-[4px] text-sm text-[var(--theme-font-desc-color)]"><span class="text-[20px] text-[var(--theme-font-color)]">$499</span> / camera</div>
          </div>
        </div>
        <div class="w-full h-[1px] bg-[var(--theme-button-bg)] my-[16px]"></div>
        <div class="flex flex-row items-center">
          <span class="text-md text-[var(--theme-font-color)]">Quantity</span>
          <div class="flex flex-row justify-start text-[14px] text-[var(--theme-font-color)] ml-[10px]">
            <div class="bg-[var(--layout-nav-bg)] flex justify-center items-center w-[34px] h-[37px] border border-solid border-[var(--grid)] border-r-0 cursor-pointer rounded-l-[8px]" @click="num--">
              <svg-icon name="sub" width="14px" height="14px" class="svgLogo s2ksvg s4ksvg"></svg-icon>
            </div>
            <div class="bg-[var(--layout-nav-bg)] flex justify-center items-center w-[39px] h-[37px] border border-solid border-[var(--grid)]">
              {{ num }}</div>
            <div class="bg-[var(--layout-nav-bg)] flex justify-center items-center w-[34px] h-[37px] border border-solid border-[var(--grid)] border-l-0 cursor-pointer rounded-r-[8px]" @click="num++">
              <svg-icon name="add" width="14px" height="14px" class="svgLogo s2ksvg s4ksvg"></svg-icon>
            </div>
          </div>
        </div>
        <div class="w-full h-[1px] bg-[var(--theme-button-bg)] my-[16px] s4k:hidden"></div>
        <div class="mb-[81px] s4k:mb-[100px]"></div>
      </div>
      <div v-else>
        <div class="w-full flex flex-col justify-center items-center">
          <div class="w-[48px] h-[48px] bg-[#1C64F2] rounded-[50%] flex mt-[32px]">
            <svg-icon name="success" width="32px" height="32px" class="m-auto s2ksvg s4ksvg"></svg-icon>
          </div>
          <div class="text-[16px] text-[var(--theme-font-color)] mt-[16px] mb-[16px]">Payment Successful</div>
          <div class="w-[400px] text-center text-[16px] text-[var(--theme-font-desc-color)] leading-[25px]">Licenses have been added to your account. You can now assign licenses to cameras</div>
          <div class="w-[158px] h-[41px] mt-[24px] bg-[var(--theme-button-bg)] rounded-[8px] s4k:rounded-[8px] cursor-pointer text-[14px] text-[var(--theme-font-color)] flex" @click="closeModal"><span class="m-auto">Assign Cameras</span></div>
          <div class="w-full h-[58px]"></div>
        </div>
      </div>
    </template>
    <template #footer>
      <div v-show="payCourse === 1" class="absolute bottom-0 left-0 w-full h-[81px] border-t border-solid border-[var(--grid)] z-[999] flex flex-row justify-start items-center">
        <div class="w-[calc(100%_-_28px)] s2k:w-[calc(100%_-_32px)] h-[41px] font-[500] text-white font-Medium text-md bg-[#1C64F2] rounded-lg flex ml-[16px] cursor-pointer flex-row justify-center items-center s4k:rounded-[8px]" @click="payCourse = 2">
          <svg-icon name="buy" width="14px" height="14px" class="svgLogo s2ksvg s4ksvg"></svg-icon>
          <span class="ml-[10px]">Buy $499</span>
        </div>
      </div>
    </template>
  </fwb-modal>
</template>

<style scoped lang="scss">
#CreateModal {
  :deep(.max-w-md) {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0;
    border-radius: 0;
    max-width: 480px;
    height: auto;

    button {
      cursor: pointer;

      &:hover {
        background: var(--theme);
      }

      svg {
        color: #6B7280;
      }
    }

    .bg-white {
      width: 100%;
      height: 100%;
      background-color: var(--theme);
      border: solid 1px var(--grid);
    }
    .p-4 {
      padding-left: 16px;
      padding-right: 12px;
    }
    .p-6 {
      padding: 0 16px;
    }
  }
}
@media screen and (min-width: 2560px) {
  .s2ksvg{
    transform: scale(1) !important;
  }
  #CreateModal {
    :deep(.max-w-md) {
      transform: scale(1.5);
      .p-4 {
        padding-left: 16px;
        padding-right: 8px;
      }
    }
  }
}
@media screen and (min-width: 3840px) {
  .s4ksvg{
    transform: scale(1) !important;
  }
  #CreateModal {
    :deep(.max-w-md) {
      transform: scale(2);
      .p-4{
        padding-top: 16px;
        padding-bottom: 14px;
      }
      .p-6 {
        padding: 0 16px;
      }
    }
  }
}
</style>
